<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src='js/vue.js'></script>
    <link rel="stylesheet" href="element-plus/index.css" />
    <script src="element-plus/index.full.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        nav {
            height: 50px;
            background-color: #00a;
            color: cyan; /* 修改为青色 */
            font-size: 16px;
            line-height: 50px;
            padding: 0 20px;
        }

        .content {
            width: calc(100% - 200px);
            height: calc(100vh - 50px);
            border: 2px solid black; /* 修改边框颜色为黑色 */
            position: absolute;
            top: 50px;
            right: 0;
        }

        /* 添加以下样式来修改 Element Plus 组件的文字颜色 */
        .el-menu {
            color: cyan; /* 修改菜单文字颜色为青色 */
        }

        .el-menu-item {
            color: cyan; /* 修改菜单项文字颜色为青色 */
        }

        .el-table {
            color: cyan; /* 修改表格文字颜色为青色 */
        }

        .el-tag {
            color: cyan; /* 修改标签文字颜色为青色 */
        }

        .el-form-item__label {
            color: cyan; /* 修改表单标签文字颜色为青色 */
        }

        .el-input__inner {
            color: cyan; /* 修改输入框文字颜色为青色 */
        }
    </style>
</head>
<body>
    <div id="app">
        <nav>
            <span>后台管理系统</span>
            <span style="float: right;">admin</span>
        </nav>
        <el-menu style="width: 200px; height:calc(100vh - 50px)" default-active='1' background-color='#00a'
            text-color="#fff" active-text-color='pink'>
            <el-menu-item index='1'>
                <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index='2'>
                <span>系统管理</span>
            </el-menu-item>
            <el-menu-item index='3'>
                <span>日志管理</span>
            </el-menu-item>
        </el-menu>

        <div class="content">
            <el-card>
                <template #header>
                    <span>用户管理</span>
                    <el-button type='primary' style="float:right;">添加用户</el-button>
                </template>

                <el-input style="width: 300px;">
                    <template #append>
                        <el-button>搜索</el-button>
                    </template>
                </el-input>

                <el-table :data='tableData' style="margin: 20px 0;" border>
                    <el-table-column prop='id' label='id'></el-table-column>
                    <el-table-column prop='name' label='姓名'></el-table-column>
                    <el-table-column prop='email' label='邮箱'></el-table-column>
                    <el-table-column prop='phone' label='电话'></el-table-column>
                    <el-table-column prop='role' label='角色'></el-table-column>
                    <el-table-column prop='status' label='状态'>
                        <template #default='scope'>
                            <el-tag v-if='scope.row.status == "启用"' type='success'>{{scope.row.status}}</el-tag>
                            <el-tag v-else type='danger'>{{scope.row.status}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label='操作'>
                        <template #default="scope">
                            <el-button @click="show=true,form={...scope.row},curren=scope.$index" size='small' type='primary'>编辑</el-button>
                            <el-button @click="del(scope.$index)" size='small' type='danger'>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination :total='50' layout="total,prev,pager,next,jumper">

                </el-pagination>
            </el-card>
            <el-dialog v-model='show' title="编辑用户" style="width: 500px;">
                <el-form ref="userForm" :rules='rules' :model='form'>
                    <el-form-item label='姓名' prop='name'>
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-form>
                <el-form>
                    <el-form-item label='邮箱'>
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                </el-form>
                <el-form>
                    <el-form-item label='电话'>
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                </el-form>
                <el-form>
                    <el-form-item label='角色'>
                        <el-input v-model="form.role"></el-input>
                    </el-form-item>
                </el-form>
                <el-form>
                    <el-form-item label='状态'>
                        <el-input v-model="form.status"></el-input>
                    </el-form-item>
                </el-form>

                <template #footer>
                    <el-button @click="show=false">取消</el-button>
                    <el-button @click="post" type='primary'>确定</el-button>
                </template>

            </el-dialog>
        </div>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    show: false,
                    form: {},
                    current: 0,
                    rules: {
                        name: [
                            { required: true, message: '请输入姓名', trigger: 'blur' }
                        ]
                    },
                    tableData: [
                        {
                            id: 1,
                            name: '张三',
                            email: 'zhangsan@example.com',
                            phone: '13826522323',
                            role: '管理员',
                            status: '启用'
                        }, {
                            id: 2,
                            name: '李四',
                            email: 'lisi@example.com',
                            phone: '16489563415',
                            role: '管理员',
                            status: '启用'
                        }, {
                            id: 3,
                            name: '王五',
                            email: 'wangwu@example.com',
                            phone: '19845632545',
                            role: '管理员',
                            status: '启用'
                        }, {
                            id: 4,
                            name: '老六',
                            email: 'laoliu@example.com',
                            phone: '14523697845',
                            role: '管理员',
                            status: '禁用'
                        }, {
                            id: 5,
                            name: '雾七',
                            email: 'wuqi@example.com',
                            phone: '14875321598',
                            role: '管理员',
                            status: '启用'
                        }, {
                            id: 6,
                            name: '孖八',
                            email:'maba@example.com',
                            phone: '16259846571',
                            role: '管理员',
                            status: '启用'
                        }
                    ]
                }
            },
            methods: {
                del(i) {
                    this.$confirm('确认删除该用户？是否继续', '提示', {
                        type: 'warning',
                        confirmButtonText: '确认',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.tableData.splice(i, 1)
                    })
                },
                post() {
                    this.$refs.userForm.validate(res => {
                        if (res) {
                            this.tableData[this.current] = {...this.form }
                            this.$message.success('修改成功')
                            this.form = {}
                            this.curren = 0
                            this.show = false
                        }
                    })
                }
            }
        }).use(ElementPlus).mount('#app')
    </script>
</body>
</html>    